@import "compass";

.user-info {
  @include background(#F0F1F2);
  border: 1px solid #C5C6C7;
  line-height: 28px;
  padding: 20px 10px;
  height: 273px;
  .tx-img {
    width: 80px;
    height: 80px;
    overflow: hidden;
    float: right;
  }
  .btn-red {
    $red_color: #F96014;
    $red_background: #ffffff;
    $red_border: $red_color;
    &:focus,
    &.focus {
      color: $red_color;
      background-color: darken($red_background, 10%);
      border-color: darken($red_border, 25%);
    }
    &:hover {
      color: $red_color;
      background-color: darken($red_background, 10%);
      border-color: darken($red_border, 12%);
    }
    &:active,
    &.active,
    .open > &.dropdown-toggle {
      color: $red_color;
      background-color: darken($red_background, 10%);
      border-color: darken($red_border, 12%);

      &:hover,
      &:focus,
      &.focus {
        color: $red_color;
        background-color: darken($red_background, 17%);
        border-color: darken($red_border, 25%);
      }
    }
    &:active,
    &.active,
    .open > &.dropdown-toggle {
      background-image: none;
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
      &:hover,
      &:focus,
      &.focus {
        background-color: $red_background;
        border-color: $red_border;
      }
    }

    .badge {
      color: $red_background;
      background-color: $red_color;
    }
  }
}

@keyframes opacityani {
  from {
    @include opacity(1);
  }

  25% {
    @include opacity(.75);
  }

  50% {
    @include opacity(.5);
  }

  75% {
    @include opacity(.75);
  }

  to {
    @include opacity(1);
  }
}

.hit {
  position: relative;
  &:before {
    background-color: #ff0500;
    content: ' ';
    position: absolute;
    left: -6px;
    top: -4px;
    height: 10px;
    width: 10px;
    @include border-radius(50%);
    @include animation(1.5s opacityani infinite);
  }
}
